{% extends "base.html" %}

{% block content %}
<h2>Dashboard</h2>
<h3>Welcome, {{ current_user.username }}!</h3>

<!-- Budget and Balance Summary -->
<div class="budget-summary">
    <h4>Monthly Budget: <span>ksh.{{ budget }}</span></h4>
    <h4>Remaining Balance: <span>ksh.{{ balance }}</span></h4>

    {% if balance < 0 %}
        <div class="alert alert-danger">
            You have exceeded your budget! Please review your expenses.
        </div>
    {% elif balance < (budget * 0.1) %}
        <div class="alert alert-warning">
            Warning: Your balance is getting low. Consider adjusting your spending.
        </div>
    {% endif %}
</div>

<h4>Your Expenses:</h4>

{% if expenses %}
<table class="expenses-table">
    <thead>
        <tr>
            <th scope="col">Amount</th>
            <th scope="col">Category</th>
            <th scope="col">Date</th>
            <th scope="col">Description</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for category, expenses_list in expenses.items() %}
        <!-- Category Row -->
        <tr class="category-row">
            <th scope="row" colspan="4">{{ category }}</th>
        </tr>
        {% for expense in expenses_list %}
        <!-- Expense Row -->
        <tr>
            <td>ksh.{{ expense.amount }}</td>
            <td>{{ expense.category }}</td>
            <td>{{ expense.date }}</td>
            <td>{{ expense.description }}</td>
            <td>
                <!-- Edit Button -->
                <a class="button fas fa-edit" href="{{ url_for('edit_expense', expense_id=expense.id) }}" ></a>

                <!-- Delete Button -->
                <form action="{{ url_for('delete_expense', expense_id=expense.id) }}" method="POST" style="display: inline;">
                    <button type="submit" class="buttons fas fa-trash-alt" 
                            onclick="return confirm('Are you sure you want to delete this expense?');">
                            
                    </button>
                </form>
            </td>
        </tr>
        {% endfor %}
        {% endfor %}
    </tbody>
</table>
{% else %}
<!-- Empty State -->
<div class="empty-state">
    <p>You have no expenses recorded. <a href="{{ url_for('add_expense') }}">Add your first expense now!</a></p>
</div>
{% endif %}


<!-- Display Debts -->
<h4>Your Debts:</h4>
{% if debts %}
    <table class="debt-table">
        <thead>
            <tr>
                <th>Amount</th>
                <th>Description</th>
                <th>Date Added</th>
                <th>Amount Paid</th>
                <th>Remaining Debt</th>
            </tr>
        </thead>
        <tbody>
            {% for debt in debts %}
            <tr>
                <td>ksh.{{ debt.amount }}</td>
                <td>{{ debt.description }}</td>
                <td>{{ debt.date_added.strftime('%Y-%m-%d') }}</td>
                <td>ksh.{{ debt.amount_paid }}</td>
                <td>ksh.{{ debt.amount - debt.amount_paid }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
{% else %}
    <p>You have no debts recorded.</p>
{% endif %}

<h4>Total Remaining Debt: ksh.{{ total_debt }}</h4>

<!-- Action Buttons -->
<div class="button-container">
    <a class="button" href="{{ url_for('add_expense') }}">Add Expense</a>
    <a class="button" href="{{ url_for('set_budget') }}">Set Budget</a>
    <a class="button" href="{{ url_for('add_debt') }}">Add Debt</a>
    <a class="button" href="{{ url_for('view_debts') }}">view debts</a>
    <a class="logout fas fa-sign-out-alt" href="{{ url_for('logout') }}"></a>
</div>
{% endblock %}